import React, { FC, useState } from 'react'
import Mytitle from '../../../../components/Mytitle'
import {inject,observer} from 'mobx-react'
import { Row, Col, Image,Tag, Button, Input, Form, Modal, message } from 'antd';
import { baseURL } from '../../../../api/request';
import { roleList } from '../../../../utils';
import {

  LockOutlined,

  
} from '@ant-design/icons';
import { reg } from '../../../../utils/validate';
import { ajax } from '../../../../api';
import { useNavigate } from 'react-router-dom';

const UserMine:FC<any>=({
  uinfo
})=> {
  const navigate =  useNavigate()
  const {userInfo,changeInfo}=uinfo
     //控制修改密码的密码对话框显示
     const [show,setShow] = useState<boolean>(false)
     const [form] = Form.useForm()
     const handleOk=()=>{
         form.validateFields().then(value=>{
             console.log(value);
             //表单验证正确了，验证旧密码成功后才能修改面
             console.log(userInfo.password);
             
             if(value.newpass==value.oldpass){
                 message.error("新旧密码不能相同")
             }else{
                 //查询旧密码是否正确
                 if(userInfo.password!=value.oldpass){
                     message.error("旧密码输入错误")
                 }else{
                     console.log("修改");
                     
                     ajax.changeuser(value).then(result=>{
                         console.log(result);
                         if(result.code==200){
                             sessionStorage.removeItem('token')
                             changeInfo(null)
                             navigate("/login")
                         }
 
                         
                     })
                 }
             }
             
         }).catch(err=>{
             message.error("请输入有效的密码")
         })
         
     }
     const handleCancel=()=>{
      setShow(false)
      
  }
  //点击修改密码
  const changePass=()=>{
      setShow(true)
  }
  return (
    <div style={{position:"relative",height:"100%"}}>
        <Mytitle text="个人中心"></Mytitle>
       {
         userInfo&& <div style={{position:"absolute",width:"200px",height:"260px",borderRadius:"10px",left:0,right:0,bottom:0,top:0,margin:"auto",padding:"10px",boxShadow:"0px 0px 10px #BDBDBD"}}>

         <div style={{display:"flex",flexDirection:"column",alignItems:"center"}}>
           {
             userInfo.avatar?<Image src={userInfo.avatar.replace(/public/,baseURL)} preview={false} style={{height:"100px",width:"100px",borderRadius:"50%"}}></Image>:<Image src={require('../../../../assets/images/xiaoxin_2.jpg')} preview={false} style={{height:"100px",width:"100px",borderRadius:"50%"}}></Image>
           }

         </div>
         <div>
           <p>用户名：{userInfo.username}</p>
           <p>手机号：{userInfo.phone}</p>
           <p>权限：
           <Tag  color={roleList.find((item:any)=>item.value==userInfo.role)?.color }>
           {roleList.find((item:any)=>item.value==userInfo.role)?.label }
           </Tag>
             </p>
         </div>
         <div style={{display:"flex",flexDirection:"column",alignItems:"center"}}>
              <Button type="primary" danger onClick={changePass}>修改密码</Button>
         </div>


       </div>
       }
          {/* 修改密码弹出框 */}
          <Modal  
            title="修改密码" 
            visible={show} 
            onOk={handleOk} 
            onCancel={handleCancel}
            okText="确定修改"
            cancelText="取消"
            okType="danger"
        >
             <Form
                name="normal_login"
                className="myform"
                initialValues={{ 
                  role:1   
                }}
                form={form}
                
            >
                <Form.Item
                  name="oldpass"
                  label="旧密码"
                  rules={[ 
                    { required: true, message: '请输入密码' },
                    { pattern:reg.pwd,message:'请输入6-16的数字+字母组合的密码'}
                  ]}
              >
                  <Input prefix={<LockOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="旧密码" />
              </Form.Item>
              <Form.Item
                  name="newpass"
                  label="新密码"
                  rules={[
                    { required: true, message: '请输入密码' },
                    { pattern:reg.pwd,message:'请输入6-16的数字+字母组合的密码'}
                  ]}
              >
                  <Input prefix={<LockOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="新密码" />
              </Form.Item>
            </Form>   
        </Modal>
    </div>
  )
}
export default inject('uinfo')(observer(UserMine))
